<template>
    <div class="section">
        <!-- 最多显示一行 -->
        <div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略。这是一段最多显示一行的文字，多余的内容会被省略。这是一段最多显示一行的文字，多余的内容会被省略</div>
        <!-- 最多显示两行 -->
        <div class="van-multi-ellipsis--l2">
            这是一段最多显示两行的文字，多余的内容会被省略。这是一段最多显示两行的文字，多余的内容会被省略。这是一段最多显示两行的文字，多余的内容会被省略。这是一段最多显示两行的文字，多余的内容会被省略
        </div>
        <!-- 最多显示三行 -->
        <div class="van-multi-ellipsis--l3">
            这是一段最多显示三行的文字，多余的内容会被省略。这是一段最多显示三行的文字，多余的内容会被省略。这是一段最多显示三行的文字，多余的内容会被省略。这是一段最多显示三行的文字，多余的内容会被省略。这是一段最多显示三行的文字，多余的内容会被省略
        </div>

        <!-- 上边框 -->
        <div class="van-hairline--top">上边框</div>

        <!-- 下边框 -->
        <div class="van-hairline--bottom">下边框</div>

        <!-- 左边框 -->
        <div class="van-hairline--left">左边框</div>

        <!-- 右边框 -->
        <div class="van-hairline--right">右边框</div>

        <!-- 上下边框 -->
        <div class="van-hairline--top-bottom">上下边框</div>

        <!-- 全边框 -->
        <div class="van-hairline--surround">全边框</div>


    </div>
</template>

<script>
  // keyword=#,#,#,#,#,#,#,#
  export default {

  }

</script>

<style type="text/css" lang="less" scoped>
.section{
    >div{
     margin-bottom: 24px;
    }
}
.van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.van-multi-ellipsis--l2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}


.van-hairline,.van-hairline--top,.van-hairline--left,.van-hairline--right,.van-hairline--bottom,.van-hairline--surround,.van-hairline--top-bottom{position:relative}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after,.van-hairline-unset--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}



</style>
